<template>
	<view class="columnbox wdh-100 content jus" :style="{'height':windowHeight+'px'}">
		<!-- <view class="wdh-100 tab-box">
            <u-tabs :current='current' :list="type" @click="changeTab"></u-tabs>
        </view> -->
		<view class="rowbox wdh-100 spb info-box">
			<scroll-view scroll-with-animation :scroll-into-view="jbscroll" scroll-y class="left-scroll">
				<view :id="'jb-'+index" @click="changeJb(index)" v-for="(item,index) in jibing" :key='index'
					class="rowbox one-box" :class="{'sel-info':index==curjibing}">
					{{item.name}}
				</view>
			</scroll-view>
			<scroll-view scroll-y class="right-scroll">
				<template v-if="jibing.length>0&&jibing[curjibing].List">
					<view v-for="(item,index) in jibing[curjibing].List" :key='index' @click="chooseItem(item,index)"
						class="rowbox one-box wdh-100" style="justify-content: space-between;">
						<view> {{item.name}}</view>
						<view v-if="item.select">
							<u-icon name="checkmark" size="32rpx" color="#00b6b2"></u-icon>
						</view>
					</view>
				</template>
			</scroll-view>
		</view>
		<view style="width: 100%;height: 200rpx;"></view>
		<view class="rowbox wdh-100 bottom-box">
			<view v-if="submitflag" class="rowbox wdh-100 send-btn grey-btn" @click="submitInfo">完成</view>
			<view v-else class="rowbox wdh-100 send-btn" @click="submitInfo">完成</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				type: [{
						name: '按科室',
					},
					{
						name: '按疾病',
					}
				],
				current: 0,
				windowHeight: 0,
				jibing: [],
				curjibing: 0,
				jbscroll: 'jb-0',
				keshi: [],
				curkeshi: 0,
				ksscroll: 'ks-0',
				selList: [],
				submitflag: false
			};
		},
		onLoad(options) {
			uni.getSystemInfo({
				success: (res) => {
					this.windowHeight = res.windowHeight
				}
			})
			if (options.list) {
				this.selList = JSON.parse(options.list)
				console.log(this.selList, '============')
			}
			this.getInfo()
		},
		methods: {
			submitInfo() {
				if (!this.submitflag) {
					uni.showLoading({
						title: '正在保存'
					})
					this.submitInfo = true
					let list = []
					this.jibing.forEach(res => {
						console.log('------------res---------', res)
						if (res.List && res.List.length > 0) {
							res.List.forEach(resp => {
								if (resp.select) {
									list.push(resp)
								}
							})
						}
					})
					let pages = getCurrentPages(); //获取所有页面栈实例列表
					let nowPage = pages[pages.length - 1]; //当前页页面实例
					let prevPage = pages[pages.length - 2]; //上一页页面实例
					prevPage.$vm.curtagList = list
					this.submitflag = false
					uni.hideLoading()
					uni.navigateBack()
				}
			},
			chooseItem(v, index) {
				v.select = !v.select
				let list = this.jibing[this.curjibing]
				this.$set(this.jibing, this.curjibing, list)
			},
			changeJb(index) {
				this.jbscroll = 'jb-' + (index == 0 ? 0 : index - 1)
				this.curjibing = index
			},
			changeKs(index) {
				this.ksscroll = 'ks-' + (index == 0 ? 0 : index - 1)
				this.curkeshi = index
			},
			changeTab(e) {
				this.current = e.index
			},
			getInfo() {
				this.$req.post('/user/jibing').then(res => {
					let newlist = []
					this.selList.forEach(type => {
						newlist.push(type.id)
					})
					if (this.selList.length > 0) {
						res.data.data.forEach(resp => {
							if (resp.List && resp.List.length > 0) {
								resp.List.forEach(v => {
									console.log(v.id)
									if (newlist.includes(v.id)) {
										v.select = true
									}
								})
							}
						})
					} else {
						res.data.data.forEach(resp => {
							console.log(resp)
							if (resp.List && resp.List.length > 0) {
								resp.List.forEach(v => {
									v.select = false
								})
							}
						})
					}
					this.jibing = res.data.data
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		font-family: PingFang SC;
	}

	.tab-box {
		background: #fff;
		border-bottom: #e2e4e4 solid 1px;
		height: 110rpx;
	}

	.info-box {
		height: calc(100% - 200rpx);
	}

	.left-scroll {
		height: 100%;
		width: 250rpx;
		background: #f8f9fb;
	}

	.right-scroll {
		width: 500rpx;
		height: 100%;
	}

	.one-box {
		width: 100%;
		font-size: 28rpx;
		height: 100rpx;
		justify-content: flex-start;
		padding: 0 20rpx
	}

	.sel-info {
		background: #fff;
	}
</style>